<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '60vh', 'overflow-y': 'auto' }" :title="title" :width="700" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </a>

    <a-card>
      <a-row :gutter="24">
        <a-col :md="8" :sm="24">
          <a-card hoverable style="height:600px;overflow-y:auto">
            <a-tree :showLine="true" @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" v-model="checkedKeys" @select="onSelect" :selectedKeys="selectedKeys" :treeData="treeData" :replaceFields="replaceFields" />
          </a-card>
        </a-col>
        <a-col :md="16" :sm="24">

          <div>
            <a-checkbox @change="onCheckAll" :indeterminate="indeterminate" :checked="checkAll">
              全选
            </a-checkbox>
          </div>
          <a-divider />
          <a-input-search placeholder="input search text" v-model="keyword" enter-button @search="onSearch" />
          <div class="select_flex">
            <div v-for="(item, idx) in userList" :key="idx" @click="onChange(item)" :class="item.select ? 'select_div select_border':'select_div'">
              <span style="margin-right: 30px">
                {{ item.label }}
              </span>
              <span v-if="item.select" style="color: blue">
                <a-icon type="check" />
              </span>
            </div>

          </div>
        </a-col>
      </a-row>
    </a-card>

  </a-modal>
</template>

<script>
import { getDepartmentList } from '@/api/department'
import { deleteChildrenIfNull } from '@/utils/util'
import cloneDeep from 'lodash.clonedeep'

export default {
  props: {
    list: {
      type: Array,
      default: []
    },
  },
  data () {
    return {
      title: '选择人员',
      visible: false,
      button_loading: false,
      ParentName: null,
      treeData: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      expandedKeys: [],
      replaceFields: {
        key: 'id'
      },
      keyword: '',
      checkAll: false,
      indeterminate: false,
      userList: [],
      selectList: []
    }
  },
  watch: {
    'list' (val) {
      this.selectList = val.map(el => ({ ...el, select: true }))
    },
    userList (val) {

      const statusArr = val.map(el => el.select)
      console.log('statusArr', val, statusArr)
      if (this.areAllTrue(statusArr)) {
        this.checkAll = true
      }

    },

  },
  created () {


    getDepartmentList().then(res => {
      this.treeData = res.children
    })

  },
  methods: {

    view () {
      this.visible = true
    },

    areAllTrue (arr) {
      return arr.every(function (item) {
        return item === true;
      });
    },
    areAllFalse (arr) {
      return arr.every(function (item) {
        return item === false;
      });
    },
    onSearch () {
      this.initData()
    },


    onSelect (selectedKeys, e) {
      this.ParentName = e.selectedNodes.length > 0 ? e.selectedNodes[0].data.props.name : this.ParentName

      this.selectedKeys = selectedKeys
      this.ParentId = selectedKeys[0]
      console.log(1111111, selectedKeys)
      //   Object.assign(this.queryParam, { deptID: selectedKeys[0] })
      this.initData()

    },

    async initData () {

    },

    onCheckAll ({ target }) {
      this.checkAll = target.checked
      this.userList.map(el => {
        el.select = target.checked

      })
      if (target.checked) {
        this.selectList = cloneDeep(this.userList)
      } else {
        this.selectList = []
      }
    },


    onChange (val) {
      val.select = !val.select
      if (val.select) {
        this.selectList.push(val)
      } else {
        let index = this.selectList.findIndex(obj => obj.value === val.value);
        if (index !== -1) {
          this.selectList.splice(index, 1);
        }
      }

      let arr = cloneDeep(this.userList)
      let selectArr = arr.map(el => { return el.select })
      console.log(33333333, this.areAllTrue(selectArr))
      console.log(9999999, this.areAllFalse(selectArr))
      if (this.areAllTrue(selectArr)) {
        this.checkAll = true
        this.indeterminate = false
      } else if (this.areAllFalse(selectArr)) {
        console.log(444444)
        this.checkAll = false
        this.indeterminate = false
      } else {
        this.indeterminate = true
      }

    },


    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    handleSubmit () {
      if (this.selectList.length == 0) {
        this.$message.error('还未选择')
        return
      }
      this.$emit("getList", this.selectList);
      this.visible = false
    },


  }
}

</script>


<style lang="less">
.select_div {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 5px;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
  // line-height: 35px;cursor: pointer;
  &.select_border {
    border: 1px solid blue;
  }
}
.select_flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  & > div {
    margin-right: 10px;
    width: 31%;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>